<template>
  <div class="page page-enai3">
    <!-- 背景 -->
    <div class="container-bg"><img src="@/assets/bg_over.jpg" class="bg"></div>
    <!-- ui组 -->
    <div class="container-ui-group">
      <!-- 照片 -->
      <div class="container-photo"><img ref="photo" :src="photo" class="photo"></div>
      <!-- 文字显示 -->
      <div class="container-text">{{ enaiText }}</div>
    </div>
    <!-- 截图容器 -->
    <!-- <div ref="canvas" class="container-cut" /> -->
    <div v-show="imgData" ref="canvas" class="container-cut">
      <img :src="imgData" alt="">
    </div>
    <!-- 提示保存 -->
    <img v-if="miva" src="@/assets/tip_save.png" class="container-tip">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
export default {
  computed: {
    ...mapGetters([
      'photo',
      'enaiText'
    ])
  },
  data() {
    return {
      showBtn: false,
      imgData: null,
      miva: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.miva = false
    }, 1800)
    setTimeout(() => {
      html2canvas(document.querySelector('#app'), {
        allowTaint: true
      }).then(canvas => {
        // document.body.appendChild(canvas)
        this.$refs.canvas.appendChild(canvas)
        var dataURL = canvas.toDataURL('image/png')
        this.imgData = dataURL
        this.showBtn = true
      })
    }, 2000)
  },
  methods: {
    routerLink(router) {
      this.$router.goTo(this, router)
    }
  }
}
</script>

<style lang="less">
.page-enai3 {
  .container-ui-group {
    width: 50%;
    position: absolute;
    top: calc(61vw);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    .container-text {
      width: 150%;
      height: calc(20vw);
      margin-top: calc(5vw);
      position: relative;
      left: -25%;
      outline: 0;
      border: 0;
      // text-align: left;
      // overflow-x: scroll;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    }
  }
  .container-photo {
    max-height: calc(57vw);
    overflow: hidden;
  }
  .container-cut {
        width: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 10px solid #fff;
        canvas {
          display: none;
        }
        img {
          pointer-events: initial
        }
    }
}
</style>
